<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级留言板</title>
    <!-- 引入jQuery -->
    <script src="/static/jquery/jquery.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="/static/vue/vue.min.js"></script>
    <style>
        .message-card {
            margin-bottom: 1rem;
            padding: 1rem;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .message-card img {
            max-width: 100%;
            border-radius: 8px;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div id="app" class="container mt-5">
        <h1 class="mb-4">班级留言板</h1>

        <!-- 留言输入区域 -->
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">发布留言</h5>
                <form @submit.prevent="postMessage">
                    <!-- 文本输入 -->
                    <div class="mb-3">
                        <textarea v-model="newMessage.content" class="form-control" rows="3" placeholder="写下你的想法..." required></textarea>
                    </div>
                    <!-- 图片上传 -->
                    <div class="mb-3">
                        <input type="file" @change="handleImageUpload" class="form-control" accept="image/*">
                    </div>
                    <!-- 匿名选择 -->
                    <div class="mb-3 form-check">
                        <input type="checkbox" v-model="newMessage.isAnonymous" class="form-check-input" id="anonymousCheck">
                        <label class="form-check-label" for="anonymousCheck">匿名发布</label>
                    </div>
                    <!-- 发布按钮 -->
                    <button type="submit" class="btn btn-primary">发布</button>
                </form>
            </div>
        </div>

        <!-- 留言列表 -->
        <div v-for="(message, index) in messages" :key="index" class="message-card">
            <div class="d-flex justify-content-between align-items-center">
                <strong>{{ message.isAnonymous ? '匿名' : message.author }}</strong>
                <small class="text-muted">{{ message.timestamp }}</small>
            </div>
            <p class="mt-2">{{ message.content }}</p>
            <img v-if="message.image" :src="message.image" alt="留言图片">
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                newMessage: {
                    content: '',
                    isAnonymous: false,
                    image: null
                },
                messages: [] // 存储所有留言
            },
            methods: {
                // 处理图片上传
                handleImageUpload(event) {
                    const file = event.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = (e) => {
                            this.newMessage.image = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                },
                // 发布留言
                postMessage() {
                    const message = {
                        author: this.newMessage.isAnonymous ? '匿名' : '学生', // 默认作者名
                        content: this.newMessage.content,
                        isAnonymous: this.newMessage.isAnonymous,
                        image: this.newMessage.image,
                        timestamp: new Date().toLocaleString() // 发布时间
                    };
                    this.messages.unshift(message); // 将新留言添加到列表顶部
                    this.resetForm(); // 清空表单
                },
                // 清空表单
                resetForm() {
                    this.newMessage = {
                        content: '',
                        isAnonymous: false,
                        image: null
                    };
                }
            }
        });
    </script>
</body>
</html>